<template>
	<view class="container">
		<view style="text-align: center;padding-top: 40px;padding-bottom: 40px;">
			<image :src="userInfo.avatar" style="height: 150px;width: 150px;border-radius: 15px" />
		</view>

		<button type="default" @click="clickCamera">
			<view class="text" style="text-align: left;">
				<uni-icons type="camera" size="18"></uni-icons>
				<text style="font-size: 15;">&nbsp;拍照</text>
			</view>
		</button>

		<button type="default" @click="clickPhoto">
			<view class="text" style="text-align: left;">
				<uni-icons type="image" size="18"></uni-icons>
				<text style="font-size: 15;">&nbsp;从手机相册选择</text>
			</view>
		</button>
		<view style="padding-top: 140px;"></view>
		<button type="primary"  @click="clickCancel">确定</button>

	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock';
	import store from '../../store';
	import {
		uploadconfig
	} from '../../const';

	export default {
		data() {
			return {
				uploadconfig,
				store,
				userInfo: {}
			}
		},
		onReady() {
			if (Object.getOwnPropertyNames(store.userInfo).length == 0) {
				websock.getUserInfo(this.store.token, res => {
					console.log('login my:', res)
					store.uid = res.data.userInfo.uid
					this.store.userInfo = store.userInfo = this.userInfo = res.data.userInfo
				})
			} else {
				this.userInfo = store.userInfo
			}
		},
		methods: {
			clickCamera() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					crop:{
						width:150,
						height:150
					},
					success: (res) => {
						console.log(res)
						uni.uploadFile({
							url: this.uploadconfig.urlModifyAvatar,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								uid: this.userInfo.uid,
								token: store.token
							},
							success: async res => {
								try {
									let data = JSON.parse(res.data)
									if (data.code != 0) {
										return uni.showToast({ title: data.message })
									}
									store.userInfo = null
									this.userInfo = await websock.getUserInfo()
									uni.$emit('userInfoChange')
								} catch (e) {
									console.error(e)
									uni.showToast({
										title: '修改头像失败1' + e.message
									})
								}
								console.log('success', res)
							},
							fail: (res) => {
								uni.showToast({
									title: '修改头像失败2' + res
								})
							},
							complete: () => {
								console.log('modify avatar complete')
							}
						})
					}
				})
			},
			clickPhoto() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					crop:{
						width:150,
						height:150
					},
					success: (res) => {
						console.log(res)
						uni.uploadFile({
							url: this.uploadconfig.urlModifyAvatar,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								uid: this.userInfo.uid,
								token: store.token
							},
							success: async res => {
								try {
									let data = JSON.parse(res.data)
									if (data.code != 0) {
										return uni.showToast({ title: data.message })
									}
									store.userInfo = null
									this.userInfo = await websock.getUserInfo()
									uni.$emit('userInfoChange')
								} catch (e) {
									console.error(e)
									uni.showToast({
										title: '修改头像失败1' + e.message
									})
								}
								console.log('success', res)
							},
							fail: (res) => {
								uni.showToast({
									title: '修改头像失败2' + res
								})
							},
							complete: () => {
								console.log('modify avatar complete')
							}
						})
					}
				})
			},
			clickSave() {
				uni.downloadFile({
					url: this.userInfo.avatar,
					success: (res) => {
						console.log("download file", res)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({ title: "保存成功！" })
							},
							fail: () => {
								uni.showToast({ title: "保存失败" })
							}
						})
					}
				})
			},
			clickCancel() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.container {
		padding-left: 20px;
		padding-right: 20px;
		line-height: 24px;
	}

	.text {
		font-size: 16px;
		color: #0E1634;
		font-weight: 400;
		text-align: center;
	}
</style>
